const path = require("path")    //node.js提供的库，可以用来获取webpack.config.js所在的当前目录
const TerserPlugin = require('terser-webpack-plugin')       //压缩用依赖
const HtmlWebpackPlugin = require('html-webpack-plugin')    //用于生成打包后文件的index.html
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin     //打包可视化操作(主要就是看各个文件的大小) 因为是一个插件 所以 要在plugin中应用
module.exports = {
    mode:'development',
    devtool:'inline-source-map',        //方便我们查看打包后的源代码
    entry:'./src/index.js',
    output:{
        filename:'dist.js',
        // filename:"[name].[contenthash].js",         
        //此处的 name 可以 写死 ，不写死的话 打包完就是 默认main.js
        // 此处打包出随机名字文件的目的是 ：防止浏览器缓存，因为浏览器缓存机制，如果不更新文件名，浏览器可能不更新；
        // 另一种说法：浏览器看这个文件夹名字用于判断是否有新文件；没有新文件就用本地缓存，不用在申请新的数据
        // 两种说法是表达的同一个理论,只是说法不同
        path:path.resolve(__dirname,'dist')
    },
    optimization:{
        minimize:true,  //是否压缩
        minimizer:[new TerserPlugin()]            //用什么工具压缩
    },
    devServer:{
        static:'./dist',
    },
    resolve:{
        alias:{
            utils:path.resolve(__dirname,'src/utils')       //设置目录别名 utils 现在就代表src/utils
            //resolve() 接收多个参数，可以指定多级目录  ，__dirname:第一级目录 依次类推 就是代表各级目录
        }
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'张三的博客列表'
        }),
        // new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
        new BundleAnalyzerPlugin()

    ],
    module:{
        rules:[{
            test:/\.css$/i,
            use:['style-loader','css-loader']
        },{
            test:/\.(jpg|png|jpeg|svg|gif)$/i,
            type:"asset/resource"   //内置(自带)的loader
        },{ 
            test:/\.js$/,
            exclude:/node_modules/, //不会转义node_modules 下边的代码
            use:{
                loader:'babel-loader',
                options:{
                    presets:['@babel/preset-env'] //转义工具 兼容低版本的浏览器
                }
            }
        }
    ]
    }
}